<template>
  <view class="container">
    <!-- 第一部分：用户信息 -->
    <view class="user-section">
      <uv-avatar size="120rpx" :src="userInfo.avatar"></uv-avatar>
      <view class="user-info">
        <text class="username">{{ userInfo.name }}</text>
        <uv-text text="已认证" type="success" v-if="userInfo.certified" text-color="#999" />
      </view>
    </view>

    <!-- 第二部分：数据卡片 -->
    <view class="data-card">
      <view class="data-item" v-for="item in statistics" :key="item.label">
        <text class="value">{{ item.value }}</text>
        <text class="label">{{ item.label }}</text>
      </view>
    </view>

    <!-- 第三部分：房产工具 -->
    <view class="section">
      <view class="section-title">房产工具</view>
      <uv-grid :col="4" :border="false">
        <uv-grid-item v-for="tool in houseTools" :key="tool.label">
          <image :src="tool.icon" class="grid-icon" />
          <text class="grid-label">{{ tool.label }}</text>
        </uv-grid-item>
      </uv-grid>
    </view>

    <!-- 第四部分：房东服务 -->
    <view class="section">
      <view class="section-title">房东服务</view>
      <uv-grid :col="4" :border="false">
        <uv-grid-item v-for="service in landlordServices" :key="service.label">
          <image :src="service.icon" class="grid-icon" />
          <text class="grid-label">{{ service.label }}</text>
        </uv-grid-item>
      </uv-grid>
    </view>

    <!-- 第五部分：广告 -->
    <view class="ads">
      <uv-swiper :list="adList" :autoplay="true" :interval="3000" :duration="500" />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const userInfo = ref({
  avatar: '/static/avatar.png',
  name: '张三',
  certified: true
})
const statistics = ref([
  { label: '浏览历史', value: 28 },
  { label: '收藏关注', value: 15 },
  { label: '预约看房', value: 6 }
])
const houseTools = ref([
  { label: '我要贷款', icon: '/static/mine/1-1.png' },
  { label: '查房价', icon: '/static/mine/1-2.png' },
  { label: '房贷计算', icon: '/static/mine/1-3.png' },
  { label: '购房资格', icon: '/static/mine/1-4.png' },
  { label: '贷款成数', icon: '/static/mine/1-5.png' },
  { label: '交易账户', icon: '/static/mine/1-6.png' },
  { label: '我的保障', icon: '/static/mine/1-7.png' },
  { label: '模拟装修', icon: '/static/mine/1-8.png' },
  { label: '装修估价', icon: '/static/mine/1-9.png' }
])
const landlordServices = ref([
  { label: '房屋估价', icon: '/static/mine/2-1.png' },
  { label: '我要卖房', icon: '/static/mine/2-2.png' },
  { label: '卖房管理', icon: '/static/mine/2-3.png' },
  { label: '房东必看', icon: '/static/mine/2-4.png' },
  { label: '我要出租', icon: '/static/mine/2-5.png' },
  { label: '租房管理', icon: '/static/mine/2-6.png' }
])
const adList = ref(['/static/mine/ad1.jpg', '/static/mine/ad2.jpg'])

</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 0 30rpx;
  background-image: url('/static/mine/user-center-bg-v1.png');
  background-size: contain;
  background-repeat: no-repeat;
}


.user-section {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 30rpx 0;


  .user-info {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-left: 30rpx;

    .username {
      color: #222;
      font-size: 36rpx;
      margin-right: 20rpx;
    }
  }
}

.data-card {
  padding: 30rpx;
}

.data-card,
.uv-grid {
  display: flex;
  justify-content: space-between;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 30rpx;

  .data-item {

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;

    .value {
      color: #333;
      font-size: 36rpx;
      font-weight: bold;
    }

    .label {
      color: #666;
      font-size: 24rpx;
      margin-top: 10rpx;
    }
  }
}


.section {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
}

.section-title {
  color: #222;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}

.grid-icon {
  width: 80rpx;
  height: 80rpx;
  margin: 30rpx 20rpx 10rpx;
}

.grid-label {
  font-size: 24rpx;
  color: #666;
}
.ads{
  padding-bottom: 30rpx;
}
</style>